<template>
    <div>
        <div class="container">
            <div class="handle-box">
                <div>
                    <el-input v-model="query.keywords" placeholder="关键词" class="handle-input mr10"></el-input>
                    <el-button type="primary" size="small" icon="el-icon-search" @click="handleSearch">搜索</el-button>
                </div>
                <!-- <div>
                    <el-button type="primary" size="small" icon="el-icon-plus" @click="handleCreate" class="add-btn">
                        添加用户</el-button>
                </div> -->
            </div>
            <el-table :data="tableData" border class="table" ref="multipleTable" header-cell-class-name="table-header"
                :cell-style="{padding:'3px 0'}">
                <el-table-column prop="log_id" label="ID" width="55" align="center"></el-table-column>
                <el-table-column prop="log_time" label="时间"></el-table-column>
                <el-table-column prop="log_operator" label="操作"></el-table-column>
                <el-table-column label="等级" align="center">
                    <template #default="scope">
                        <el-tag type="success" v-if="scope.row.log_level == 1" size="small">正常</el-tag>
                        <el-tag type="success" v-if="scope.row.log_level == 2" size="small">警告</el-tag>
                        <el-tag type="success" v-if="scope.row.log_level == 3" size="small">异常</el-tag>
                    </template>
                </el-table-column>
                <el-table-column prop="log_source" label="来源"></el-table-column>
                <el-table-column prop="log_show" label="内容"></el-table-column>
                <el-table-column prop="log_txt" label="详情"></el-table-column>
                
            </el-table>
            <div class="pagination">
                <el-pagination background layout="total, prev, pager, next" :current-page="query.page"
                    :page-size="query.limit" :total="pageTotal" @current-change="handlePageChange"></el-pagination>
            </div>
        </div>

        <!-- 添加弹出框 -->
        <el-dialog title="添加" v-model="addVisible" width="50%">
            <el-form label-width="70px">
                <el-form-item label="账号名称">
                    <el-input v-model="createForm.name"></el-input>
                </el-form-item>
                <el-form-item label="账号密码">
                    <el-input v-model="createForm.password"></el-input>
                </el-form-item>
                <el-form-item label="确认密码 ">
                    <el-input v-model="createForm.apassword"></el-input>
                </el-form-item>
                <el-form-item label="显示名称 ">
                    <el-input v-model="createForm.showname"></el-input>
                </el-form-item>
                <el-form-item label="管理员 ">
                    <el-radio-group v-model="createForm.isadmin" class="ml-4">
                        <el-radio label="1" size="large">是</el-radio>
                        <el-radio label="0" size="large">否</el-radio>
                    </el-radio-group>
                </el-form-item>
            </el-form>
            <template #footer>
                <span class="dialog-footer">
                    <el-button @click="addVisible = false">取 消</el-button>
                    <el-button type="primary" @click="saveCreate">确 定</el-button>
                </span>
            </template>
        </el-dialog>

        <!-- 编辑弹出框 -->
        <el-dialog title="编辑" v-model="editVisible" width="50%">
            <el-form label-width="70px">
                <el-form-item label="账号名称">
                    <el-input v-model="eidtForm.info.name"></el-input>
                </el-form-item>
                <el-form-item label="账号密码">
                    <el-input v-model="eidtForm.info.password"></el-input>
                </el-form-item>
                <el-form-item label="确认密码">
                    <el-input v-model="eidtForm.info.apassword"></el-input>
                </el-form-item>
                <el-form-item label="显示名称">
                    <el-input v-model="eidtForm.info.showname"></el-input>
                </el-form-item>
                <el-form-item label="管理员 ">
                    <el-radio-group v-model="eidtForm.info.isadmin" class="ml-4">
                        <el-radio label="1" size="large">是</el-radio>
                        <el-radio label="0" size="large">否</el-radio>
                    </el-radio-group>
                </el-form-item>
            </el-form>
            <template #footer>
                <span class="dialog-footer">
                    <el-button @click="editVisible = false">取 消</el-button>
                    <el-button type="primary" @click="saveEdit">确 定</el-button>
                </span>
            </template>
        </el-dialog>
    </div>
</template>

<script>
    import { ref, reactive } from "vue";
    import { ElMessage, ElMessageBox } from "element-plus";
    import { logList, accountCreate, accountUpdate } from "../api/index";
    import { typeName, log } from "../utils/user"

    export default {
        name: "basetable",
        setup() {
            const statusText = ["禁用", "启用"]
            const typeNames = typeName();

            let typeText = {};
            Object.keys(typeNames).forEach(k => {
                typeText[typeNames[k][0]] = typeNames[k][1]
            })
            log("typeText", typeText);

            const query = reactive({
                keywords: "",
                page: 1,
                limit: 15,
            });
            const tableData = ref([]);
            const pageTotal = ref(0);

            // 获取表格数据
            const getData = () => {
                logList(query).then((res) => {
                    if (res.status == 'ok') {
                        tableData.value = res.data.list;
                        pageTotal.value = res.data.pageTotal || 1;
                    } else {
                        ElMessage.error(res.msg)
                        return false;
                    }
                });
            };
            getData();

            // 查询操作
            const handleSearch = () => {
                query.page = 1;
                getData();
            };
            // 分页导航
            const handlePageChange = (val) => {
                query.page = val;
                getData();
            };

            // 删除操作
            const handleDelete = (index) => {
                // 二次确认删除
                ElMessageBox.confirm("确定要删除吗？", "提示", {
                    type: "warning",
                })
                    .then(() => {
                        ElMessage.success("删除成功");
                        tableData.value.splice(index, 1);
                    })
                    .catch(() => { });
            };
            // 表格添加
            const addVisible = ref(false);

            const handleCreate = () => {
                addVisible.value = true;
            };

            let createForm = reactive({
                name: "",
                password: "",
                apassword: "",
                showname: "",
                isadmin:"0"
            });

            const saveCreate = () => {
                log(createForm)
                if (!createForm.name) {
                    ElMessage.error('请输入用户名')
                    return false;
                }
                if (!createForm.password) {
                    ElMessage.error('请输入密码')
                    return false;
                }
                if (createForm.password  != createForm.apassword) {
                    ElMessage.error('请确认输入密码')
                    return false;
                }

                accountCreate(createForm).then(res => {
                    if (res.status == 'ok') {
                        addVisible.value = false;
                        ElMessage.success(res.msg);
                        query.pageIndex = 1;
                        getData();
                    } else {
                        ElMessage.error(res.msg)
                    }
                })
            }


            // 表格编辑时弹窗和保存
            const editVisible = ref(false);
            let eidtForm = reactive({
                id: 0,
                info: {
                    name: "",
                    password: "",
                    apassword: "",
                    showname: "",
                    isadmin:"0",
                }
            });
            let idx = -1;
            const handleEdit = (index, row) => {
                idx = index;
                eidtForm.info.name = row["account_name"];
                eidtForm.info.password = row["account_pwd"];
                eidtForm.info.showname = row["show_name"];
                eidtForm.info.isadmin = row["is_admin"]+'';
                eidtForm.id = row["id"];
                editVisible.value = true;
            };
            const saveEdit = () => {
                if (!eidtForm.info.name) {
                    ElMessage.error('请输入账号')
                    return false;
                }
                if (!eidtForm.info.password) {
                    ElMessage.error('请输入密码')
                    return false;
                }
                if (eidtForm.info.password  != eidtForm.info.apassword) {
                    ElMessage.error('请确认输入密码')
                    return false;
                }
                accountUpdate(eidtForm).then(res => {
                    if (res.status == 'ok') {
                        editVisible.value = false;
                        ElMessage.success(res.msg);
                        getData();
                    } else {
                        ElMessage.error(res.msg)
                    }
                })

            };
            const toggleStatus = (id, status) => {
                log("toggleStatus", id)
                let temp = {
                    id: id,
                    info: {
                        status: status
                    }
                }

                ElMessageBox.confirm("确认修改吗", "提示", {
                    type: "warning",
                })
                    .then(() => {
                        accountUpdate(temp).then(res => {
                            if (res.status == 'ok') {
                                ElMessage.success(res.msg)
                                getData();
                                return false;
                            } else {
                                ElMessage.error(res.msg)
                                return false;
                            }
                        })
                    })
                    .catch(() => { });


            }

            return {
                statusText,
                typeText,

                // data
                query,
                tableData,
                pageTotal,


                handleSearch,
                handlePageChange,
                handleDelete,

                editVisible,
                eidtForm,
                handleEdit,
                saveEdit,

                createForm,
                addVisible,
                handleCreate,
                saveCreate,

                toggleStatus,
            };
        },
    };
</script>

<style scoped>
    .handle-box {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 8px;
    }

    .handle-input {
        width: 300px;
        display: inline-block;
    }

    .table {
        width: 100%;
        font-size: 14px;
    }

    .red {
        color: #ff0000;
    }

    .mr10 {
        margin-right: 10px;
    }

    .table-td-thumb {
        display: block;
        margin: auto;
        width: 40px;
        height: 40px;
    }

    .m-radio {
        margin: 12px;
    }
</style>